<template>

  <data-table
    ref="pagingTable"
    :options="options"
    :list-query="listQuery"
  >
    <template #filter-content>

      <dic-catalog-tree v-model="listQuery.params.catId" dic-code="repo_catalog" width="200" title="题库分类查询" class="filter-item" style="margin-top: 3px" />

      <el-input v-model="listQuery.params.title" size="small" placeholder="搜索题库名称" style="width: 200px;" class="filter-item" />

      <div class="file-item" style="display: inline-block">
        <div style="display: flex; align-items: center; padding-left: 10px">
          <el-checkbox v-model="isExam" label="用于考试" />
          <el-checkbox v-model="isTrain" label="用于训练" />
        </div>

      </div>

    </template>

    <template #data-columns>

      <el-table-column
        label="题库名称"
        prop="title"
        show-overflow-tooltip
      >

        <template v-slot="scope">
          <span>{{ scope.row.title }}</span>
        </template>

      </el-table-column>

      <el-table-column
        label="开放类型"
        width="120px"
        prop="openType_dictText"
        align="center"
      />

      <el-table-column
        label="题库分类"
        prop="catId_dictText"
        align="center"
      />

      <el-table-column
        label="试题总数"
        align="center"
        prop="quCount"
        width="120px"
      />

      <el-table-column
        label="客观题数量"
        align="center"
        prop="objCount"
        width="120px"
      />

      <el-table-column
        label="主观题数量"
        align="center"
        prop="subjCount"
        width="120px"
      />

      <el-table-column
        label="用于考试"
        align="center"
        width="100px"
      >

        <template v-slot="scope">
          <span v-if="scope.row.isExam" style="color: #1aac1a">是</span>
          <span v-else style="color: #ff3333">否</span>
        </template>

      </el-table-column>

      <el-table-column
        label="用于训练"
        align="center"
        width="100px"
      >

        <template v-slot="scope">
          <span v-if="scope.row.isTrain" style="color: #1aac1a">是</span>
          <span v-else style="color: #ff3333">否</span>
        </template>

      </el-table-column>

      <el-table-column
        label="创建时间"
        align="center"
        prop="createTime"
        width="180px"
      />

      <el-table-column
        label="操作"
        align="center"
        width="200px"
      >

        <template v-slot="scope">

          <router-link v-permission="['repo:update']" :to="{ name: 'UpdateRepo', params: { id: scope.row.id }}" style="margin-right: 10px">
            <el-link type="success" icon="el-icon-edit">修改题库</el-link>
          </router-link>

          <router-link v-permission="['qu:list']" :to="{ name: 'ListQuByRepo', params: { repoId: scope.row.id }}">
            <el-link type="primary" icon="el-icon-document">试题管理</el-link>
          </router-link>

        </template>

      </el-table-column>

    </template>

  </data-table>

</template>

<script>
import DataTable from '@/components/DataTable'
import DicCatalogTree from '@/components/DicTreeSelect'
import permission from '@/directive/permission/index.js'
import { mapGetters } from 'vuex' // 权限判断指令

export default {
  directives: { permission },
  components: { DicCatalogTree, DataTable },
  data() {
    return {

      listQuery: {
        current: 1,
        size: 10,
        params: {
          title: ''
        }
      },

      isExam: false,
      isTrain: false,

      options: {

        // 可批量操作
        multi: true,

        add: {
          enable: true,
          permission: 'repo:add',
          router: { name: 'AddRepo' }
        },
        edit: {
          enable: true,
          permission: 'repo:update',
          router: { name: 'UpdateRepo', params: { id: '$id' }}
        },
        delete: {
          enable: true,
          permission: 'repo:delete',
          url: '/api/repo/delete'
        },

        // 列表请求URL
        listUrl: '/api/repo/paging'
      }
    }
  },

  computed: {
    ...mapGetters([
      'siteData'
    ])
  },
  watch: {
    isExam: {
      handler(val) {
        if (val != null && val) {
          this.listQuery.params.isExam = true
        } else {
          this.listQuery.params.isExam = ''
        }

        this.$refs.pagingTable.getList()
      }
    },
    isTrain: {
      handler(val) {
        if (val != null && val) {
          this.listQuery.params.isTrain = true
        } else {
          this.listQuery.params.isTrain = ''
        }

        this.$refs.pagingTable.getList()
      }
    }
  },
  methods: {

  }
}
</script>
